<template>
	<view class="container">
		<view>
			<u--form labelPosition="left" :model="from" :rules="rules" ref="form1" labelWidth="110px"
				:labelStyle="labelStyle">
				<view class="title"> 基础信息 </view>
				<view class="box">
					<u-form-item label="作业票名称" prop="zypmc" borderBottom>
						<u--input v-model="from.zypmc" placeholder="请输入作业票名称" border="none"></u--input>
					</u-form-item>
					<u-form-item label="作业申请单位" prop="zysqdw" borderBottom @click="showApplicationUnit">
						<u--input disabled v-model="from.zysqdw" placeholder="选择作业申请单位" border="none"
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="作业申请时间" prop="createTimes" borderBottom
						@click="(dateTimeShow = true), (dataType = 0), (title = '作业申请时间')">
						<u--input v-model="from.createTimes" placeholder="选择作业申请时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="作业实施时间" prop="jobImplementDates" borderBottom
						@click="(dateTimeShow = true), (dataType = 1), (title = '作业实施时间')">
						<u--input v-model="from.jobImplementDates" placeholder="选择作业实施时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<user-pick :label="'监火人'" :multiple="true" :title="'监火人'" :placeholder="'请选择监火人'"
						v-model="from.jhr" :prop="'jhr'"></user-pick>
					<view style="color: #838383; padding: 10px 0">作业内容</view>
					<!--					<u-form-item label="作业内容" prop="userInfo.name" borderBottom>-->
					<u-textarea type="textarea" v-model="from.dhnr" placeholder="请输入作业内容" height="120"
						confirmType="next" style="background: #f6f6f6; margin-bottom: 30px; width: 100%"></u-textarea>
					<!--          </u-form-item>-->
					<u-form-item label="动火地点" prop="dhdd" borderBottom @click="playWithFireAddress">
						<u--input v-model="from.dhdd" placeholder="选择动火地点" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="动火部位" prop="dhbw" borderBottom>
						<u--input v-model="from.dhbw" placeholder="输入动火部位" border="none"></u--input>
					</u-form-item>
					<u-form-item label="动火作业级别" prop="Level" borderBottom @click="playFreeLevel">
						<u--input v-model="from.Level" placeholder="选择动火作业级别" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<!--          <u-form-item label="动火人" prop="fzr" borderBottom @click="playFireMan">-->
					<!--            <u&#45;&#45;input-->
					<!--              v-model="from.fzr"-->
					<!--              placeholder="选择动火人"-->
					<!--              border="none"-->
					<!--              disabled-->
					<!--              disabledColor="#ffffff"-->
					<!--            >-->
					<!--            </u&#45;&#45;input>-->
					<!--            <u-icon slot="right" name="arrow-right"></u-icon>-->
					<!--          </u-form-item>-->
					<user-pick :label="'动火人'" :multiple="false" :title="'动火人'" :placeholder="'请选择动火人'"
						v-model="from.dhr" :prop="'dhr'"></user-pick>
					<u-form-item label="作业单位" prop="zydw" borderBottom @click="workUnit">
						<u--input v-model="from.zydw" placeholder="选择作业单位" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<!--          <u-form-item-->
					<!--            label="作业负责人"-->
					<!--            prop="dhfzr"-->
					<!--            borderBottom-->
					<!--            @click="workPrincipal"-->
					<!--          >-->
					<!--            <u&#45;&#45;input-->
					<!--              v-model="from.dhfzr"-->
					<!--              placeholder="选择作业负责人"-->
					<!--              border="none"-->
					<!--              disabled-->
					<!--              disabledColor="#ffffff"-->
					<!--            ></u&#45;&#45;input>-->
					<!--            <u-icon slot="right" name="arrow-right"></u-icon>-->
					<!--          </u-form-item>-->
					<user-pick :label="'作业负责人'" :multiple="false" :title="'作业负责人'" :placeholder="'请选择作业负责人'"
						v-model="from.dhfzr" :prop="'dhfzr'"></user-pick>
					<view style="color: #838383; padding: 10px 0">动火方式</view>
					<!--					<u-form-item label="动火方式" prop="userInfo.name">-->
					<u--textarea v-model="from.hotWay" placeholder="请输入内容" height="120" confirmType="next"
						style="background: #f6f6f6; margin-bottom: 30px"></u--textarea>
					<!--					</u-form-item>-->
				</view>
				<view class="title"> 关联特殊作业 </view>
				<view class="box">
					<u-form-item label="关联特殊作业" prop="associateSpecialJobs" @click="associateSpecialJobs">
						<u--input v-model="from.associateSpecialJobs" placeholder="选择关联特殊作业" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>
				<view class="title"> 气体检测 </view>
				<view class="box">
					<u-form-item label="取样分析时间" prop="samplingAnalysisTime2" borderBottom
						@click="(dateTimeShow = true), (dataType = 2), (title = '取样分析时间')">
						<u--input v-model="from.samplingAnalysisTime2" placeholder="选择取样分析时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="代表性气体" prop="representativeGas" borderBottom>
						<u--input v-model="from.representativeGas" placeholder="输入代表性气体" border="none"></u--input>
					</u-form-item>
					<!--					<u-form-item label="分析结果" prop="userInfo.name" borderBottom>-->
					<!--						<u&#45;&#45;input v-model="model1.userInfo.name" placeholder="" border="none"></u&#45;&#45;input>-->
					<!--						<u-icon slot="right" name="arrow-right"></u-icon>-->
					<!--					</u-form-item>-->
					<view style="color: #838383; padding: 10px 0">分析结果</view>
					<u--textarea v-model="from.analysisResults" placeholder="请输入内容" height="120" confirmType="next"
						style="background: #f6f6f6; margin-bottom: 30px"></u--textarea>
					<!--          <u-form-item label="分析人" prop="analyst" @click="analyst">-->
					<!--            <u&#45;&#45;input-->
					<!--              v-model="from.analyst"-->
					<!--              placeholder="选择分析人"-->
					<!--              border="none"-->
					<!--              disabled-->
					<!--              disabledColor="#ffffff"-->
					<!--            ></u&#45;&#45;input>-->
					<!--            <u-icon slot="right" name="arrow-right"></u-icon>-->
					<!--          </u-form-item>-->
					<user-pick :label="'分析人'" :multiple="false" :title="'分析人'" :placeholder="'请选择分析人'"
						v-model="from.analyst" :prop="'analyst'"></user-pick>
				</view>
				<view class="title"> 危害辨识-安全措施 </view>
				<view class="box" style="padding-bottom: 6px">
					<u-form-item label="危害辨识" prop="text" borderBottom @click="toHazardousFactors">
						<u--input v-model="from.text" placeholder="选择危害因素" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view
						style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
						<u-checkbox-group v-model="from.harm" placement="column" :labelSize='32'>
							<u-checkbox activeColor="#53c21d" v-for="(item,index) in from.  harm" :label="item.label"
								:name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked=true>
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<u-form-item label="安全措施" prop="text" borderBottom @click="toSafetyMeasures">
						<u--input v-model="from.text" placeholder="选择安全措施" border="none" disabled
							disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view
						style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
						<u-checkbox-group v-model="from.safetyMeasures" placement="column" :labelSize='32'>
							<u-checkbox activeColor="#53c21d" v-for="(item,index) in from.safetyMeasures"
								:label="item.label" :name="item.value" shape="circle" :key="index"
								style="padding: 10px 20px" :checked=true>
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<u-form-item label="个人用品防护" prop="text" borderBottom @click="toProtection">
						<u--input v-model="from.text" placeholder="选择个人用品防护" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<view
						style="background:#f6f6f6;margin-bottom: 30px;border-radius:8px;height: 200px;overflow-y: auto">
						<u-checkbox-group v-model="from.personalProtection" placement="column" :labelSize='32'>
							<u-checkbox activeColor="#53c21d" v-for="(item,index) in from.personalProtection"
								:label="item.label" :name="item.value" shape="circle" :key="index"
								style="padding: 10px 20px" :checked=true>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="title"> 安全交底 </view>
				<view class="box">
					<user-pick :label="'安全交底人'" :multiple="false" :title="'安全交底人'" :placeholder="'请选择安全交底人'"
						v-model="from.securityConfessor" :prop="'securityConfessor'"></user-pick>
					<user-pick :label="'接受交底人'" :multiple="false" :title="'接受交底人'" :placeholder="'请选择接受交底人'"
						v-model="from.acceptConfessor" :prop="'acceptConfessor'"></user-pick>
				</view>
				<!--        <view class="title">安全教育</view>-->
				<!--        <view class="box">-->
				<!--&lt;!&ndash;          <u-form-item&ndash;&gt;-->
				<!--&lt;!&ndash;            label="计划性"&ndash;&gt;-->
				<!--&lt;!&ndash;            prop="planned"&ndash;&gt;-->
				<!--&lt;!&ndash;            borderBottom&ndash;&gt;-->
				<!--&lt;!&ndash;            @click="&ndash;&gt;-->
				<!--&lt;!&ndash;              (jobApplication.show = true),&ndash;&gt;-->
				<!--&lt;!&ndash;                (jobApplication.title = '是否计划性'),&ndash;&gt;-->
				<!--&lt;!&ndash;                (jobApplication.showType = 6),&ndash;&gt;-->
				<!--&lt;!&ndash;                (jobApplication.columns = [['非计划性', '计划性']])&ndash;&gt;-->
				<!--&lt;!&ndash;            "&ndash;&gt;-->
				<!--&lt;!&ndash;          >&ndash;&gt;-->
				<!--&lt;!&ndash;            <u&#45;&#45;input&ndash;&gt;-->
				<!--&lt;!&ndash;              v-model="from.planned"&ndash;&gt;-->
				<!--&lt;!&ndash;              placeholder="选择计划性"&ndash;&gt;-->
				<!--&lt;!&ndash;              border="none"&ndash;&gt;-->
				<!--&lt;!&ndash;              disabled&ndash;&gt;-->
				<!--&lt;!&ndash;              disabledColor="#ffffff"&ndash;&gt;-->
				<!--&lt;!&ndash;            ></u&#45;&#45;input>&ndash;&gt;-->
				<!--&lt;!&ndash;            <u-icon slot="right" name="arrow-right"></u-icon>&ndash;&gt;-->
				<!--&lt;!&ndash;          </u-form-item>&ndash;&gt;-->
				<!--&lt;!&ndash;          <user-pick&ndash;&gt;-->
				<!--&lt;!&ndash;            :label="'实施安全教育人'"&ndash;&gt;-->
				<!--&lt;!&ndash;            :multiple="false"&ndash;&gt;-->
				<!--&lt;!&ndash;            :title="'实施安全教育人'"&ndash;&gt;-->
				<!--&lt;!&ndash;            :placeholder="'请选择实施安全教育人'"&ndash;&gt;-->
				<!--&lt;!&ndash;            v-model="from.ssaqjyr"&ndash;&gt;-->
				<!--&lt;!&ndash;            :prop="'ssaqjyr'"&ndash;&gt;-->
				<!--&lt;!&ndash;          ></user-pick>&ndash;&gt;-->
				<!--        </view>-->
				<view class="title"> 审核人/审核部门 </view>
				<view class="box">
					<user-pick :label="'作业负责人'" :multiple="false" :title="'作业负责人'" :placeholder="'请选择作业负责人'"
						v-model="from.zyfzr" :prop="'zyfzr'"></user-pick>
					<user-pick :label="'所在单位'" :multiple="false" :title="'所在单位审批人'" :placeholder="'请选择所在单位审批人'"
						v-model="from.szdwspr" :prop="'szdwspr'"></user-pick>
					<user-pick :label="'安全管理部门'" :multiple="false" :title="'安全管理部门'" :placeholder="'请选择安全管理部门审批人'"
						v-model="from.aqglbm" :prop="'aqglbm'"></user-pick>
					<user-pick :label="'动火审批人'" :multiple="false" :title="'动火审批人'" :placeholder="'请选择动火审批人'"
						v-model="from.dhspr" :prop="'dhspr'"></user-pick>
					<user-pick :label="'当班班长'" :multiple="false" :title="'当班班长'" :placeholder="'请选择动当班班长'"
						v-model="from.dbbz" :prop="'dbbz'"></user-pick>
				</view>
				<view class="title"> 验收人 </view>
				<view class="box">
					<user-pick :label="'验收人1'" :multiple="false" :title="'验收人'" :placeholder="'请选择动验收人'"
						v-model="from.ysr" :prop="'ysr'"></user-pick>
				</view>
			</u--form>
			<u-button type="primary" text="申请" @click="submit" class="but"></u-button>
		</view>
		<u-picker :show="jobApplication.show" :title="jobApplication.title" ref="uPicker"
			:columns="jobApplication.columns" @cancel="jobApplication.show = false" @confirm="confirm"></u-picker>
		<u-datetime-picker :minDate="newData" :show="dateTimeShow" mode="datetime" :title="title"
			@cancel="dateTimeShow = false" @confirm="checkDateTime"></u-datetime-picker>
	</view>
</template>

<script>
	import UTextarea from "../../../uni_modules/uview-ui/components/u-textarea/u-textarea";
	import userPick from "@/pages/Components/userPick";
	import {
		addHotWorkTicketAPI,
		getDepartmentAPI,
		jobInformationAPI,
		aboutWorkAPI,
	} from "../../../api/api";
	export default {
		components: {
			UTextarea,
			userPick,
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			let brand = currPage.brand
			if (!!brand) {
				if (brand.option) {
					this.from.harm = brand.option
					this.from.whbs = brand.optionList.toString()
				} else if (brand.list) {
					this.from.safetyMeasures = brand.list
					this.from.aqcs = brand.idList.toString()
				} else if (brand.fh) {
					this.from.personalProtection = brand.fh
					this.from.grypfh = brand.fhlist.toString()
				}
			}
		},
		data() {
			return {
				//上个页面传递过来的值
				columnData: [
					[]
				],
				multipleColumnsType: null,
				title: "",
				title2: "",
				dataType: null,
				newData: new Date().getTime(),
				dateTimeShow: false,
				from: {
					harm: [],
					safetyMeasures: [],
					personalProtection: [],
					aqcs: '', //安全措施
					zysqdw: "", //作业申请单位
					zynr: "", //作业内容
					zydw: "", //作业单位
					createTimes: "", //创建时间label
					createTime: "", //创建时间value
					jobImplementDates: "", //作业实施时间
					dhfzr: "", //监护人
					dhnr: "", //动火内容
					dhdd: "", //动火地点
					Level: "", //动火作业级别label
					dhzzyz: "", //动火作业级别value
					fzr: "", //动火人
					hotWay: "", //动火方式,
					associateSpecialJobs: "", //关联特殊作业
					samplingAnalysisTime2: "", //取样分析时间
					samplingAnalysisTime: "", //取样分析时间
					representativeGas: "", //代表性气体
					analysisResults: "", //分析结果
					analyst: "", //分析人
					securityConfessor: "", //安全交底人
					acceptConfessor: "", //接受交底人
					planned: "", //计划性lable
					jhx: "", //计划性value
					ssaqjyr: "", //实施安全教育人
					zyfzr: "", //作业负责人
					szdwspr: "", //所在单位审批人
					dhspr: "", //动火审批人
					aqglbm: "", //安全管理部门审批人
					dbbz: "", //当班班长
					ysr: "", //验收人
					hazardIdentification: "", //危害辨识
					whbs: '',
					grypfh: '', //个人用品防护
					zypmc: "", //作业票名称
					dhr: "", //动火人
				},
				workContent: "", //作业内容
				hotWorkMode: "", //动火方式
				//作业申请单位
				jobApplication: {
					showType: 0,
					title: "作业单位/部门",
					columns: [],
					show: false,
				},
				showSex: false,
				labelStyle: {
					color: "#666",
				},
				model1: {
					userInfo: {
						name: "",
						sex: "",
					},
				},
				actions: [{
						name: "男",
					},
					{
						name: "女",
					},
					{
						name: "保密",
					},
				],
				rules: {
					createTimes: {
						type: "string",
						required: true,
						message: "请选择作业申请时间",
						trigger: ["blur"],
					},
					zydw: {
						type: "string",
						required: true,
						message: "请选择作业作业单位",
						trigger: ["blur"],
					},
					jobImplementDates: {
						type: "string",
						required: true,
						message: "请选择作业实施时间",
						trigger: ["blur"],
					},
					dhfzr: {
						type: "string",
						required: true,
						message: "请选择监护人",
						trigger: ["blur"],
					},
				},
				radio: "",
				switchVal: false,
			};
		},
		methods: {
			toProtection() {
				uni.navigateTo({
					url:'../components/protection/protection'
				});
			},
			toHazardousFactors() {
				uni.navigateTo({
					url: "../components/hazardousFactors/hazardousFactors",
				});
			},
			toSafetyMeasures() {
				uni.navigateTo({
					url: "../components/safetyMeasures/safetyMeasures",
				});
			},
			//关联特殊作业 TODO
			associateSpecialJobs() {
				this.jobApplication.showType = 5;
				this.jobApplication.title = "关联特殊作业";
				aboutWorkAPI({}).then((r) => {
					let msg = r.data.map((e) => {
						return e.zypmc;
					});
					this.jobApplication.columns = [msg];
				});
				this.jobApplication.show = true;
			},
			//作业负责人
			workPrincipal() {
				this.multipleColumnsType = 3;
				this.title2 = "作业负责人";
				this.multipleColumnsShow = true;
			},
			//作业单位
			workUnit() {
				this.jobApplication.showType = 4;
				this.jobApplication.show = true;
				this.jobApplication.title = "作业单位";
				getDepartmentAPI({}).then((r) => {
					let msg = r.data.map((r) => {
						return r.deptName;
					});
					this.jobApplication.columns = [msg];
				});
			},
			// 动火作业级别
			playFreeLevel() {
				this.jobApplication.show = true;
				this.jobApplication.showType = 3;
				this.jobApplication.title = "动火作业级别";
				this.jobApplication.columns = [
					["特殊危险动火", "一级动火", "二级动火"]
				];
			},
			//动火地点
			playWithFireAddress() {
				this.jobApplication.showType = 2;
				this.jobApplication.title = "动火地点";

				jobInformationAPI({}).then((r) => {
					let msg = r.data.map((e) => {
						return e.qymc;
					});
					this.jobApplication.columns = [msg];
				});
				this.jobApplication.show = true;
			},
			checkDateTime(e) {
				const timeFormat = uni.$u.timeFormat;
				if (this.dataType === 0) {
					this.from.createTimes = timeFormat(e.value, "yyyy-mm-dd hh:MM");
					this.from.createTime = timeFormat(e.value, "yyyymmddhhMM");
				} else if (this.dataType === 1) {
					this.from.jobImplementDates = timeFormat(e.value, "yyyy-mm-dd hh:MM");
					this.from.jobImplementDate = timeFormat(e.value, "yyyymmddhhMM");
				} else if (this.dataType === 2) {
					this.from.samplingAnalysisTime2 = timeFormat(e.value, "yyyy-mm-dd hh:MM");
					this.from.samplingAnalysisTime = timeFormat(e.value, "yyyymmddhhMM");
					console.log(this.from.samplingAnalysisTime);
				}
				this.dateTimeShow = false;
			},
			showApplicationUnit() {
				this.jobApplication.showType = 1;
				this.jobApplication.show = true;
				getDepartmentAPI({}).then((r) => {
					let msg = r.data.map((r) => {
						return r.deptName;
					});
					this.jobApplication.columns = [msg];
				});
			},

			confirm(e) {
				if (this.jobApplication.showType === 1) {
					this.from.zysqdw = e.value[0];
				} else if (this.jobApplication.showType === 2) {
					this.from.dhdd = e.value[0];
				} else if (this.jobApplication.showType === 3) {
					this.from.Level = e.value[0];
					this.from.dhzzyz = e.indexs[0] + 1;
				} else if (this.jobApplication.showType === 4) {
					this.from.zydw = e.value[0];
				} else if (this.jobApplication.showType === 5) {
					this.from.associateSpecialJobs = e.value[0];
				} else if (this.jobApplication.showType === 6) {
					this.from.jhx = e.indexs[0];
					this.from.planned = e.value[0];
				}

				this.jobApplication.show = false;
			},
			submit() {
				console.log(this.from);
				addHotWorkTicketAPI({
					...this.from,
				}).then((r) => {
					this.$refs.uToast.show({
						type: "loading",
						message: "加载中",
						iconUrl: "https://cdn.uviewui.com/uview/demo/toast/loading.png",
					});
					if (r.code === 200) {
						this.$refs.uToast.show({
							type: "success",
							message: "新增成功",
							iconUrl: "https://cdn.uviewui.com/uview/demo/toast/success.png",
						});
						setTimeout((e) => {
							uni.reLaunch({
								url: "../../home/home",
							});
						}, 1000);
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		padding: 0 24rpx;
		background-color: #f6f6f6;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 44rpx;
			padding: 20rpx 48rpx;
		}

		.box {
			padding: 0rpx 48rpx 10rpx 48rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}

	.but {
		margin: 30rpx 0;
	}
</style>
